<template>
	<view>
		<view style="display: flex;">
			<scroll-view scroll-y="true" class="SV_categoryTitle" :style="{ height: '100%' }">
				<view class="categoryTitle">
					<view
						class="categoryName"
						v-for="(item, index) in categoryList"
						:key="index"
						:class="categoryNameActive == index ? 'categoryNameActive' : ''"
						@click="categoryClickEvent(item.typeId, index, true)"
					>
						<image :src="item.imgUrl" :class="{ gray: categoryNameActive !== index }"></image>
						<view class="subTitle">{{ item.typeName || '' }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="list-right">
				<view class="list-item" v-for="(item, index) in detailList" :key="index">
					<view style="position: relative;">
						<view class="mask" v-if="item.isIndate !== '02'">
							<text class="mask_title" v-if="item.isIndate == '01'">敬请期待</text>
							<text class="mask_title" v-if="item.isIndate == '03'">活动已结束</text>
						</view>
						<text class="mask_tag" v-if="item.isIndate == '02'">进行中</text>
						<image :src="item.imgUrl" mode="aspectFill"></image>
					</view>
					<view class="item-content">
						<view class="title">{{ item.planTheme || '' }}</view>
						<view class="btn">
							<text class="join-number">{{ item.clockTotalNum || 0 }}人参与</text>
							<button class="join-btn" @click="take(item)">{{ '立即参与' }}</button>
						</view>
					</view>
				</view>
				<mix-load-more :status="loading"></mix-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../common/request.js';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import { getCommonShareInfo } from '@/common/utils.js';
export default {
	components: {
		mixLoadMore
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			height: (info.windowHeight * 750) / info.windowWidth,
			detailList: [],
			loading: 0,
			loadingType: 0,
			pageNum: 1,
			pageSize: 5,
			categoryList: [],
			categoryNameActive: 0, //当前选中active
			scrollTop: 0, //scroll-top
			scrollVal: 0, //滑动的值
			scrollStatus: true, //点击状态，是否能点击
			nodeHeight: [], //存储categoryList的top
			id: ''
		};
	},
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	mounted() {
		this.cardList();
		// this.categoryClickEvent()
	},
	onReachBottom() {
		//当划到最底部的时候触发事件
		if (this.loading != 2) {
			this.getThemeList();
		}
	},
	methods: {
		cardList() {
			http('/api/sysThemePunchPlan/punchTypeList', { data: {}, method: 'GET' }).then(
				result => {
					if (result.code == '200') {
						const data = result.data;
						this.categoryList = data;
						this.id = data[0].typeId;
						this.categoryClickEvent(this.id, 0, false);
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		take({ planId, planTheme, isIndate }) {
			//埋点
			this.$umaTrackEvent('takeCard', { planId, planTheme, source: '主题打卡列表' });
			uni.navigateTo({
				url: '/card/takeCard?id=' + planId + '&isIndate=' + isIndate,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		categoryClickEvent(id, index, tag) {
			if (tag) {
				this.detailList = [];
				this.pageNum = 1;
			}
			this.loading = 1;
			if (id) {
				this.categoryNameActive = index;
				this.id = id;
			}
			this.getThemeList();
		},
		getThemeList() {
			http('/api/sysThemePunchPlan/punchPlanList', { data: { typeId: this.id, pageNum: this.pageNum, pageSize: this.pageSize }, method: 'GET' }).then(
				result => {
					if (result.code == '200') {
						const data = result.data.records;
						this.detailList = this.detailList.concat(data); //进行数据的累加
						if (data.length == this.pageSize) {
							this.pageNum++; //页数的++
							this.loading = 0;
						} else {
							this.loading = 2;
						}
						this.loading = this.detailList.length === 0 ? 3 : this.loading;
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #f7f7f7;
}
.categoryTitle {
	width: 144rpx;
	font-size: 24rpx;
	color: #66645d;
}

.SV_categoryTitle {
	width: 144rpx;
	background: #fff;
	position: fixed;
	left: 0;
	// top: 80rpx;
	bottom: 0;
}

.categoryName {
	padding: 24rpx 0;
	width: 144rpx;
	text-align: center;
	height: 170rpx;
	border-bottom: solid 2rpx #f7f7f7;

	.gray {
		-webkit-filter: grayscale(1);
		-moz-filter: grayscale(1);
		-ms-filter: grayscale(1);
		-o-filter: grayscale(1);
		filter: grayscale(1);
		filter: gray;
	}
	.subTitle {
		margin-top: 10rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		padding: 0 24rpx;
		line-height: 33rpx;
	}
	image {
		width: 70rpx;
		height: 70rpx;
	}
}

.categoryNameActive {
	background: #f7f7f7;
}
.categoryListName {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-indent: 20rpx;
	float: left;
}
.list-right {
	width: 100%;
	box-sizing: border-box;
	padding-left: 172rpx;
	padding-right: 28rpx;
	.list-item {
		background: #fff;
		border-radius: 12rpx;
		margin-top: 24rpx;
		position: relative;
		overflow: hidden;
		image {
			width: 100%;
			height: 238rpx;
			border-radius: 12rpx 12rpx 0 0;
		}
		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 9;
			left: 0;
			right: 0;
			.mask_title {
				font-size: 30rpx;
				color: #fff;
				position: absolute;
				z-index: 10;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.mask_tag {
			width: 120rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background: #f39800;
			font-size: 24rpx;
			position: absolute;
			z-index: 10;
			left: 0;
			top: 36rpx;
		}
		.item-content {
			padding: 20rpx 24rpx 32rpx 24rpx;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(102, 100, 93, 1);
				line-height: 42rpx;
				margin-bottom: 24rpx;
			}
			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.join-number {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(138, 140, 141, 1);
					line-height: 40rpx;
				}
				.join-btn {
					width: 140rpx;
					height: 50rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: rgba(102, 100, 93, 1);
					line-height: 50rpx;
					background: rgba(250, 204, 107, 1);
					border-radius: 12rpx;
					padding: 0;
					margin: 0;
					border: none;
				}
			}
		}
	}
}
</style>
